<template>
  <view class="plan-detail-container">
    <view class="header-section">
      <text class="page-title">健身计划详情</text>
    </view>
    
    <view class="plan-detail-card">
      <view class="plan-header">
        <text class="plan-name">{{ planDetail.name }}</text>
        <text class="plan-goal">目标：{{ planDetail.goal }}</text>
      </view>
      
      <view class="plan-meta">
        <view class="meta-item">
          <text class="meta-label">会员：</text>
          <text class="meta-value">{{ planDetail.memberName }}</text>
        </view>
        <view class="meta-item">
          <text class="meta-label">教练：</text>
          <text class="meta-value">{{ planDetail.coachName }}</text>
        </view>
        <view class="meta-item">
          <text class="meta-label">时间：</text>
          <text class="meta-value">{{ formatDate(planDetail.startDate) }} - {{ formatDate(planDetail.endDate) }}</text>
        </view>
        <view class="meta-item">
          <text class="meta-label">状态：</text>
          <text class="meta-value" :class="getStatusClass(planDetail.status)">
            {{ getStatusText(planDetail.status) }}
          </text>
        </view>
      </view>
      
      <view class="plan-section">
        <text class="section-title">计划描述</text>
        <text class="section-content">{{ planDetail.description }}</text>
      </view>
      
      <view class="plan-section">
        <text class="section-title">计划内容</text>
        <text class="section-content">{{ planDetail.content }}</text>
      </view>
    </view>
    
    <view class="action-section">
      <button class="back-button" @click="goBack">返回</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { planApi } from '../../src/services/plan'

// 健身计划详情数据
const planDetail = ref({
  id: 0,
  memberId: 0,
  memberName: '',
  coachId: 0,
  coachName: '',
  name: '',
  description: '',
  goal: '',
  content: '',
  startDate: '',
  endDate: '',
  status: 1
})

// 页面加载时获取健身计划详情
onMounted(() => {
  // 从路由参数获取健身计划ID
  const pages = getCurrentPages()
  const current = pages[pages.length - 1]
  const options = current.options || {}
  const planId = options.id ? parseInt(options.id) : 1
  fetchPlanDetail(planId)
})

// 获取健身计划详情
const fetchPlanDetail = async (id: number) => {
  try {
    const response: any = await planApi.getPlanDetail(id)
    planDetail.value = response.data
  } catch (error) {
    console.error('获取健身计划详情失败:', error)
    uni.showToast({
      title: '获取健身计划详情失败',
      icon: 'none'
    })
  }
}

// 格式化日期
const formatDate = (date: string) => {
  return date ? date.split('T')[0] : ''
}

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 1: return '进行中'
    case 2: return '已完成'
    case 0: return '已取消'
    default: return '未知'
  }
}

// 获取状态样式类
const getStatusClass = (status: number) => {
  switch (status) {
    case 1: return 'status-active'
    case 2: return 'status-completed'
    case 0: return 'status-cancelled'
    default: return ''
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.plan-detail-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.plan-detail-card {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.plan-header {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.plan-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.plan-goal {
  font-size: 28rpx;
  color: #4B0082;
}

.plan-meta {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
  margin-bottom: 30rpx;
}

.meta-item {
  display: flex;
}

.meta-label {
  font-size: 28rpx;
  color: #666;
  width: 120rpx;
}

.meta-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.status-active {
  color: #4caf50;
}

.status-completed {
  color: #2196f3;
}

.status-cancelled {
  color: #f44336;
}

.plan-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.section-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.action-section {
  padding: 0 20rpx;
}

.back-button {
  background-color: #4B0082;
  color: #fff;
  border: none;
  padding: 30rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
  width: 100%;
}
</style>